<template>
	<div class="seller" ref="seller">
		<div class="seller-content">
			<div class="overview">
				<h4 class="title">{{seller.name}}</h4>
				<div class="desc border-1px">
					<star :size="36" :score="seller.score"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h4>起送价</h4>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>
						</div>
					</li>
					<li class="block">
						<h4>商家配送</h4>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>
						</div>
					</li>
					<li class="block">
						<h4>平均配送时间</h4>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>
						</div>
					</li>
				</ul>
				<div class="favorite" @click="toggleFavorite">
					<span class="icon-favorite" :class="{'active':favorite}"></span>
					<span class="text">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h4 class="title">公告与活动</h4>
				<div class="content-wrapper">
					<p class="content">{{seller.bulletin}}</p>
				</div>
				<ul v-if="seller.supports" class="supports">
					<li class="support-item border-1px" v-for="(item,index) in seller.supports">
						<span class="icon" :class="classMap[seller.supports[index].type]"></span>
						<span class="text">{{seller.supports[index].description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="pics">
				<h4 class="title">商家实景</h4>
				<div class="pic-wrapper" ref="picwrapper">
					<ul class="pic-list" ref="piclist">
						<li class="pic-item" v-for="pic in seller.pics">
							<img :src="pic" width="120" height="90">
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h4 class="title">商家信息</h4>
				<ul>
					<li class="info-item" v-for="info in seller.infos">{{info}}</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import {saveToLocal,loadFromLocal} from '../../common/js/store'
	import star from '../star/star';
	import split from '../split/split';

	export default {
		props: {
			seller: {
				type:Object
			}
		},
		components: {
			star,
			split
		},
		data() {
			return {
				favorite:(() => {
					return loadFromLocal(this.seller.id,'favorite',false);
				})()
			}
		},
		created() {
			this.classMap = ['decrease','discount','special','invoice','guarantee'];
		},
		mounted() {
			let scroll = new BScroll(this.$refs.seller,{
				click:true
			});
			if(this.seller.pics) {
				let picWidth = 120;
				let margin = 6;
				let width = (picWidth + margin) * this.seller.pics.length - margin;
				this.$refs.piclist.style.width = width + 'px';
				let picScroll = new BScroll(this.$refs.picwrapper,{
					scrollX:true,eventPassthrough:'vertical'
				})
			}
		},
		computed: {
			favoriteText() {
				return this.favorite ? '已收藏' : '收藏';
			}
		},
		methods: {
			toggleFavorite(event) {
				if(!event._constructed) {
					return;
				};
				this.favorite = !this.favorite;
				saveToLocal(this.seller.id,'favorite',this.favorite);
			}
		}
	}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	@import "../../common/stylus/mixin";
	.seller
		position:absolute
		top:174px
		bottom:0
		left:0
		width:100%
		overflow:hidden
		.overview
			position:relative
			padding:18px
			.title
				margin-bottom:8px
				line-height:14px
				font-size:14px
				color:rgb(7,17,27)
			.desc
				padding-bottom:18px
				font-size:0
				border-1px(rgba(7,17,27,0.1))
				.star
					display:inline-block
					margin-right:8px
					line-height:18px
					vertical-align:top
				.text
					display:inline-block
					margin-right:12px
					line-height:18px
					vertical-align:top
					font-size:10px
					color:rgb(77,85,93)
			.remark
				display:flex
				padding-top:18px
				.block
					flex:1
					text-align:center
					border-right:1px solid rgba(7,17,27,0.1)
					&:last-child
						border:none
					h4
						margin-bottom:4px
						line-height:10px
						font-size:10px
						color:rgb(147,153,159)
					.content
						line-height:24px
						font-size:10px
						color:rgb(7,17,27)
			.favorite
				position:absolute
				width:50px
				right:11px
				top:18px
				text-align:center
				.icon-favorite
					display:block
					margin-bottom:4px
					line-height:24px
					font-size:24px
					color:rgba(7,17,27,0.1)
					&.active
						color:rgb(240,20,20)
				.text
					line-height:10px
					font-size:10px
					color:rgb(77,85,93)
		.bulletin
			padding:18px 18px 0 18px
			.title
				margin-bottom:8px
				line-height:14px
				font-size:14px
				color:rgb(7,17,27)
			.content-wrapper
				padding:0 12px 16px 12px
				border-1px(rgba(7,17,27,0.1))
				.content
					line-height:24px
					font-size:12px
					color:rgb(240,20,20)
			.supports
				.support-item
					padding:16px 12px
					border-1px(rgba(7,17,27,0.1))
					font-size:0
					&:last-child
						border-none()
					.icon
							display:inline-block
							vertical-align:top
							width:16px
							height:16px
							margin-right:6px
							background-size:16px 16px
							background-repeat:no-repeat
							&.decrease
								bg-image('decrease_4')
							&.discount
								bg-image('discount_4')
							&.guarantee
								bg-image('guarantee_4')
							&.invoice
								bg-image('invoice_4')
							&.special
								bg-image('special_4')
					.text
						line-height:16px
						font-size:12px
						color:rgb(7,17,27)
		.pics
			padding:18px
			.title
				margin-bottom:8px
				line-height:14px
				color:rgb(7,17,27)
				font-size:14px
			.pic-wrapper
				width:100%
				overflow:hidden
				white-space:nowrap
				.pic-list
					font-size:0
					.pic-item
						display:inline-block
						margin-right:6px
						width:120px
						height:90px
						&:last-child
							margin:0
		.info
			padding:18px 18px 0 18px
			color:rgb(7,17,27)
			.title
				padding-bottom:12px
				line-height:14px
				border-1px(rgba(7,17,27,0.1))
				font-size:14px
			.info-item
				padding:16px 12px
				line-height:16px
				border-1px(rgba(7,17,27,0.1))
				font-size:12px
				&:last-child
					border-none()

</style>